<template>
  <div class="cluster recovery">
    <a-card style="width: 100%; min-height: 100%">
      <p slot="title" class="cardTitles">
        <span>管理员管理</span>
        <a-button type="primary" @click="addManagement">新增</a-button>
      </p>
      <div class="formDiv">
        <a-form layout="inline">
          <a-row>
            <a-col :span="4">
              <a-form-item label="用户名">
                <a-input v-model="account" type="text" style="width: 120px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="姓名">
                <a-input v-model="name" type="text" style="width: 100px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="站段">
                <a-select
                  v-model="section"
                  style="width: 120px"
                  @change="handleSectionChange"
                >
                  <a-select-option
                    v-for="section in sectionData"
                    :key="section"
                  >
                    {{ section }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="车间/科室">
                <a-select v-model="shop" style="width: 150px">
                  <a-select-option v-for="shop in shopData" :key="shop">
                    {{ shop }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="管理员类型">
                <a-select v-model="auth" style="width: 150px">
                  <a-select-option :value="2" v-if="loginUserAuth === 1 || loginUserAuth === 2"
                    >段级管理员</a-select-option
                  >
                  <a-select-option :value="3">车间/科室管理员</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-top: 10px">
            <a-col :span="4">
              <a-form-item>
                <a-button type="primary" @click="search">搜索</a-button>
              </a-form-item>
              <a-form-item>
                <a-button @click="reset">重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="margin-top: 20px" class="table-content">
        <a-table
          bordered
          :columns="columns"
          :data-source="list"
          rowKey="id"
          :pagination="pagination"
          :loading="loading"
          @change="managementChangePage"
        >
          <template slot-scope="text, record" slot="action">
            <a class="tools" @click="edit(record)">编辑</a>
            <a class="tools" type="link" @click="deletle(record)">删除</a>
          </template>
          <template slot-scope="text, record" slot="auth">
            {{ record.auth | adminType }}
          </template>
        </a-table>
      </div>
    </a-card>
    <!-- 新增 -->
    <addModel
      :id="managementId"
      :type="managementType"
      :managementVisible="managementVisible"
      @closeFunc="managementVisible = false"
      @updateInform="updateInform"
    />
  </div>
</template>

<script>
import addModel from "components/configuration/management/addModel";
import { getManagementList, deleteManagement, getTree } from "@/api/management";
import { paging } from "assets/js/mixin";
export default {
  mixins: [paging],
  components: {
    addModel,
  },
  data() {
    return {
      loginUserAuth:JSON.parse(localStorage.getItem("userInfo")).auth,
      sectionData: [],
      shopData: [],
      loading: false,
      //是否显示弹框
      managementVisible: false,
      managementId: undefined,
      managementType: 0, //0新增1是编辑
      account: "",
      name: "",
      section: "",
      shop: "",
      auth: "",
      selectedRowKeys: [],
      columns: [
        {
          title: "管理员id",
          dataIndex: "id",
        },
        {
          title: "用户名",
          dataIndex: "account",
        },
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "站段",
          dataIndex: "section",
        },
        {
          title: "车间/科室",
          dataIndex: "shop",
        },
        {
          title: "管理员类型",
          dataIndex: "auth",
          scopedSlots: { customRender: "auth" },
        },
        {
          title: "创建时间",
          dataIndex: "createdAt",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      list: [],
      formLayout: {
        spanCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
    };
  },
  mounted() {
    this.getTree();
    this.getManagementList();
  },
  methods: {
    handleSectionChange() {
      this.shop = "";
      var shopArr = [];
      for (const key in this.treeArr[this.section]) {
        shopArr.push(key);
      }
      this.shopData = shopArr;
    },
    //获取树结构
    getTree() {
      getTree()
        .then((res) => {
          this.treeArr = res.data.data;
          var sectionArr = [];
          var shopArr = [];
          for (const key in this.treeArr) {
            sectionArr.push(key);
          }
          for (const key in this.treeArr[sectionArr[0]]) {
            shopArr.push(key);
          }
          this.sectionData = sectionArr;
          //this.shopData = shopArr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除用户信息
    deletle(record) {
      var _this = this;
      this.$confirm({
        title: "确定要删除该条职工信息吗？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          deleteManagement(record.id)
            .then((res) => {
              if (res.code === 10002) {
                _this.$message.error(res.msg);
              } else if(res.code ===2){
                _this.$message.error(res.msg);
              }{
                _this.$message.success("删除成功");
                _this.getManagementList();
              }
            })
            .catch((err) => {
              _this.$message.destroy();
              _this.$message.error(err);
            });
        },
      });
    },
    //保存修改数据后刷新列表 关闭抽屉
    updateInform() {
      this.managementVisible = false;
      this.getManagementList();
    },
    onSelectChange(selectedRowKeys) {
      //列表多选操作
      this.selectedRowKeys = selectedRowKeys;
    },
    addManagement() {
      this.managementVisible = true;
      this.managementType = 0;
    },
    //编辑单个员工
    edit(record) {
      this.managementVisible = true;
      this.managementType = 1;
      this.managementId = record.id;
    },
    //搜索
    search() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getManagementList();
    },
    //重置
    reset() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.account = "";
      this.section = "";
      this.shop = "";
      this.group = "";
      this.name = "";
      this.auth = "";
      this.shopData =[];
      this.getManagementList();
    },
    managementChangePage(pagination) {
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getManagementList();
    },
    //获取管理员列表
    getManagementList() {
      this.loading = true;
      var params = {
        page: this.pageNum,
        limit: this.pageSize,
        account: this.account,
        section: this.section,
        shop: this.shop,
        name: this.name,
        auth: this.auth,
      };
      getManagementList(params)
        .then((res) => {
          this.list = res.data.users;
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.formDiv {
  .lable {
    margin-right: 10px;
  }
}

.upload {
  float: right;
}

.recovery {
  height: 100%;
}

.table-content {
  height: calc(100% - 138px);
  overflow: auto;
}

.ant-card-body {
  height: 100%;
}
</style>